<template>
	<view class="wap_content">
		<u-navbar :title="title" fixed placeholder :autoBack="true"></u-navbar>
		<view class="play-circle_box display_flex_seart" v-if="songList.length>0" @click="playSongAll">
			<u-icon name="play-circle" size="28"></u-icon>全部播放（{{songList.length}}）
		</view>
		<view class="pub_box" v-if="songList.length>0">

			<view class="pub_item display_flex_seart" v-for="(item,index) in songList" :key="item.id" @click="songItemClick(item)">
				<view class="pub_item_i_box display_flex_center">
					<image class="pub_item_image"
						:src="item.picUrl" mode=""></image>
				</view>
				<view class="pub_item_r display_flex_column">
					<view class="pub_item_title text_overflow_ellipsis">{{item.name}}</view>
					<view class="pub_item_desc text_overflow_ellipsis"><text>{{title}}</text>{{item.desc}}-{{item.author}}
					</view>
				</view>
				<view class="pub_item_icon display_flex_center">
					<u-icon name="kefu-ermai" size="28"></u-icon>
				</view>
			</view>

		</view>
		<u-empty mode="history" text="推荐么有了" v-if="songList.length == 0">
		</u-empty>
		<x-play-card ref="playCard" v-if="showPlayCard"></x-play-card>
		<u-back-top :scroll-top="scrollTop"></u-back-top>
	</view>
</template>

<script>
	var app=getApp();
	import {mapState,mapMutations} from 'vuex'
	export default {
		data() {
			return {
				scrollTop:0,
				limit: 20,
				offset: 0,
				songList:[],
				psong_id:0,
				title:"每日推荐"
			}
		},
		computed:{
			...mapState(["nowPlaySongListId", "showPlayCard"])
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onReachBottom() {
			this.offset += this.limit;
			this.getSongList();
		},
		onLoad(opt) {
			let {id,name} = opt;
			this.psong_id = id;
			this.title = name;
			this.getSongList();
		},
		methods: {
			...mapMutations(['setNowPlaySong','initNowPlaySongList','moreNowPlaySongList','addNowPlaySongListStart']),
			/**
			 * 播放全部
			 */
			playSongAll(){
				let _this = this;
				_this.initNowPlaySongList(_this.psong_id);
				_this.moreNowPlaySongList();
				_this.setNowPlaySong(_this.songList[0]);
				_this.$nextTick(()=>{
					_this.$refs.playCard.playSong();
				})
				// this.playSong();
			},
			
			/**
			 * 点击歌曲
			 */
			songItemClick(item){
				let _this = this;
				if (_this.psong_id != _this.nowPlaySongListId) {
					
					_this.addNowPlaySongListStart([item]);
				}
				_this.setNowPlaySong(item);
				_this.$nextTick(()=>{
					_this.$refs.playCard.playSong();
				})
				// this.playSong();
			},
			
			/**
			 * 获取歌单列表
			 */
			getSongList(){
				let _this = this;
				uni.$ajax({
					url: '/playlist/track/all?limit='+_this.limit+'&offset='+_this.offset+'&id='+_this.psong_id,
					type: "get",
					loading: true,
					}).then(re => {
					if (re.songs){
						let putList = [];
						re.songs.forEach(item=>{
							putList.push({
								name:item.name,
								id:item.id,
								author:item.ar[0].name,
								desc:item.al.name,
								picUrl:item.al.picUrl
							});
						})
						if (putList.length>0) {
							if (_this.songList.length>0) {
								_this.songList=[..._this.songList,...putList];
							}else{
								_this.songList = putList;
							}
						}
					}
				})
			},
		}
	}
</script>

<style>
	.wap_content {
		background-color: #fff;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 100rpx);
		padding-bottom:  calc(env(safe-area-inset-bottom) + 100rpx);
	}

	.play-circle_box {
		width: 100%;
		padding: 0 20rpx;
		box-sizing: border-box;
		height: 100rpx;
	}

	.pub_box {
		width: 100%;
	}

	.pub_item {
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx;
	}

	.pub_item_i_box {
		width: 100rpx;
		height: 100%;
		margin-right: 10rpx;
	}

	.pub_item_image {
		width: 80rpx;
		height: 80rpx;
		border-radius: 15rpx;
	}

	.pub_item_icon {
		width: 120rpx;
		height: 100%;
	}

	.pub_item_r {
		flex: none;
		width: calc(100% - 240rpx);
		height: 100%;
	}

	.pub_item_title {
		width: 100%;
		color: #1a1a1a;
		font-size: 32rpx;
	}

	.pub_item_desc {
		width: 100%;
		color: #a1a1a1;
		font-size: 26rpx;
	}

	.pub_item_desc text {
		flex: none;
		box-sizing: border-box;
		font-size: 22rpx;
		color: red;
		background-color: #d4ecd9;
		border-radius: 10rpx;
		margin-right: 10rpx;
		padding: 0 5rpx;
	}
</style>